<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过插槽分发内容</title>
</head>

<script src="node_modules/vue/dist/vue.js"></script>

<body>

<h1>通过插槽分发内容</h1>
<div id="alert-box-demo">
    <alert-box>
        Something bad happened.
    </alert-box>
</div>

<script>
    // 声明一个组件
    Vue.component('alert-box', {
            template: `
        <div class="demo-alert-box">
          <strong>Error!</strong>
          <slot></slot>
        </div>
      `
    })

    new Vue({
        el: "#alert-box-demo"
    })
</script>
</body>
</html>